@charset "utf-8";

/*  Color Pool
    html.background:                    rgba(240,240,240,1)     HTML_DFLT_BG_COLOR
    html.background(radial-gradient,01):rgba(220,220,220,1)     HTML_DFLT_BG_RG1_COLOR
    html.background(radial-gradient,02):rgba(85,85,85,1)        HTML_DFLT_BG_RG2_COLOR
    --
    div.header.border:                  rgba(86,86,86,1)        HEADER_BORDOR_COLOR
    div.header.box-shadow:              rgba(68,68,68,1)        HEADER_BORDOR_SHDW_COLOR
    div.header.background(radial-gradient,01):rgba(255,255,255,1)       HEADER_DFLT_BG_RG1_COLOR
    div.header.background(radial-gradient,02):rgba(191,191,191,1)       HEADER_DFLT_BG_RG2_COLOR
    h1.header.color:                    rgba(17,17,17,1)        HEADER_H1_COLOR
    h1.header.text-shadow:              rgba(254,254,254,1)     HEADER_H1_SHDW_COLOR
    --
    li.area.color:                      rgba(69,69,69,1)        AREA_LI_COLOR
    li.area:before.background:          rgba(130,130,100,0.5)   AREA_ORTR_BG_COLOR
    li.area:hover:before,
    li.area:active:before.background:   rgba(160,160,130,0.5)   AREA_ORTR_AC_COLOR
    li.active_area.background:          rgba(180,180,150,1)     ARAR_ACT_COLOR
    li.active_area.border:              rgba(50,50,80,1)        AREA_BORDER_COLOR
    li.active_area.border-bottom-color: rgba(180,180,150,1)     ARAR_ACT_COLOR
    --
    div.area_content.background:             rgba(180,180,150,1)     ARAR_ACT_COLOR
    div.area_content.border:                 rgba(50,50,80,1)        AREA_BORDER_COLOR
    --
    li.navigator.color:                 rgba(70,70,70,1)        NAVIGATOR_LI_COLOR
    li.active_navigator.background:     rgba(180,190,160,1)     NAVIGATOR_ACT_COLOR
    li.active_navigator.border-right-color: rgba(180,190,160,1) NAVIGATOR_ACT_COLOR
    li.active_navigator.border:         rgba(71,71,71,1)        NAVIGATOR_BORDER_COLOR
    li.active_navigator.color:          rgba(72,72,72,1)        NAVIGATOR_ACT_LI_COLOR
    li.navigator:before.background:     rgba(131,131,101,0.5)   NAVIGATOR_ORTR_BG_COLOR
    li.navigator:hover:before,
    li.navigator:active:before.background:  rgba(161,161,131,0.5) NAVIGATOR_ORTR_AC_COLOR
    div.navigator_content.background:   rgba(180,190,160,1)     NAVIGATOR_ACT__COLOR
    div.navigator_content.border:       rgba(71,71,71,1)        NAVIGATOR_BORDER_COLOR
    --
    li.func_tab.color:                  rgba(73,73,73,1)        FUNC_TAB_LI_COLOR
    li.func_tab:before.background:      rgba(131,131,101,0.2)   FUNC_TAB_ORTR_BG_COLOR
    li.func_tab:hover:before,
    li.func_tab:active:before.background:   rgba(161,161,131,0.2)   FUNC_TAB_ORTR_AC_COLOR
    li.active_func_tab.background:          rgba(181,181,151,1)     FUNC_TAB_ACT_COLOR
    li.active_func_tab.border:              rgba(51,51,81,1)        FUNC_TAB_BORDER_COLOR
    li.active_func_tab.border-bottom-color: rgba(181,181,151,1)     FUNC_TAB_ACT_COLOR
    div.func_tab_content.background:        rgba(181,181,151,1)     FUNC_TAB_ACT_COLOR
    div.func_tab_content.border:            rgba(51,51,81,1)        FUNC_TAB_BORDER_COLOR
    
    --
    li.area:hover,
    li.area:active.color:               rgba(250,250,250,1)     TAB_ACT_LIGHT_COLOR
    li.area:hover,
    li.area:active.text-shadow:         rgba(250,250,250,1)     TAB_ACT_LIGHT_COLOR
    li.navigator:hover,
    li.navigator:active.color:          rgba(250,250,250,1)     TAB_ACT_LIGHT_COLOR
    li.navigator:hover,
    li.navigator:active.text-shadow:    rgba(250,250,250,1)     TAB_ACT_LIGHT_COLOR
    li.func_tab:hover,
    li.func_tab:active.color:          rgba(250,250,250,1)     TAB_ACT_LIGHT_COLOR
    li.func_tab:hover,
    li.func_tab:active.text-shadow:    rgba(250,250,250,1)     TAB_ACT_LIGHT_COLOR


*/

html { 
    background:rgba(240,240,240,1); 
    background:-webkit-radial-gradient(28% 5%, farthest-corner, rgba(220,220,220,1), rgba(85,85,85,1));
    background:-moz-radial-gradient(25% 10%, farthest-corner, rgba(220,220,220,1), rgba(85,85,85,1));
    height: 100%;
}
/* ----  Header (start) ---- */
div.header {
    width:70%;
    min-width:400px;
    height:auto;
    margin:0 auto;
    /*a*/
/*    border-radius:20px;
    border: 2px rgba(86,86,86,1) solid;
    box-shadow: 10px 5px 2px 0px rgba(68,68,68,1);
    background: -webkit-radial-gradient(10% 20%, farthest-corner, rgba(255,255,255,1), rgba(191,191,191,1));
    background: -moz-radial-gradient(10% 20%, farthest-corner, rgba(255,255,255,1), rgba(191,191,191,1));*/
    /*a*/
    border: 1px green dashed;
}
div.title{
    width:60%;
    /*a*/
    border-radius:20px;
    border: 2px rgba(86,86,86,1) solid;
    box-shadow: 10px 5px 2px 0px rgba(68,68,68,1);
    background: -webkit-radial-gradient(10% 20%, farthest-corner, rgba(255,255,255,1), rgba(191,191,191,1));
    background: -moz-radial-gradient(10% 20%, farthest-corner, rgba(255,255,255,1), rgba(191,191,191,1));
    /*a*/
    margin:0 auto;
    /*border: 1px red dashed;*/
}
h1.header {
    margin:10px auto 10px auto;
    text-align: center;
    width: 100%;
    font-size: 3em;
    color: rgba(17,17,17,1);
    text-shadow: 0px 0px 10px rgba(254,254,254,1);
}
/* ----  Header ( end ) ---- */

/* ----  Area (start) ---- */
div.area {
    width: 60%;
    margin:10px auto 0px;
}
h1.area {
    display: inline-block;
    float: left;
    margin: 5px 5px 5px;
    width: 30%;
    text-align: center;
    font-size: 2em;
}
ul.area {margin:0; padding:0; font-weight:normal;list-style: none;}
li.area { 
    background: none;
    cursor: pointer;
    padding: 15px 25px;
    display: inline-block;
    position: relative;
    border-radius:20px 20px 0px 0px;
    color: rgba(69,69,69,1);
}
li.area:hover,
li.area:active {
    color: rgba(250,250,250,1);
    text-shadow: 0px 0px 10px rgba(250,250,250,1);
}
li.area:before {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    /*a*/
    width: 100%;
    height: 80%;
    top: 20%;
    left: 0;
    background: rgba(130,130,100,0.5) ;
    /*a*/
    border-radius:20px 20px 0px 0px;
}
li.area:hover:before,
li.area:active:before {
    width: 100%;
    height: 90%;
    top:10%;
    background: rgba(160,160,130,0.5) ;
}
li.active_area {
    padding: 15px 25px;
    display: inline-block;
    position: relative;
    top:2px; 
    /*a*/
    border-radius:20px 20px 0px 0px;
    background: rgba(180,180,150,1) ;
    border: 2px rgba(50,50,80,1) solid;
    border-bottom-color: rgba(180,180,150,1);
    z-index: 2;
    /*b*/
    font-weight: bold;
}
div.area_content {
    width: 70%;
    height: 750px;
    margin: 0px auto;
    background: rgba(180,180,150,1) ;
    border-radius:20px;
    border: 2px rgba(50,50,80,1) solid;
}
/* ----  Area ( end ) ---- */

/* ----  Navigator (start) ---- */
div.navigator {
    width: 14%;
    height: 96%;
    position: relative;
    top: 2%;
    left:1%;
    float: left;
}
h1.navigator {
    display: inline-block;
    float: top;
    font-size: 1em;
    margin: 10px 10px 10px 10px;
    height: 10%;
}
ul.navigator {
    margin:0; padding:0; font-weight:normal;list-style: none;
}
li.navigator { 
    background: none;
    cursor: pointer;
    padding: 10px 0px;
    display: inline-block;
    margin-bottom: 5px;
    position: relative;
    border-radius:10px 0px 0px 10px;
    color: rgba(70,70,70,1);
    width: 100%;
    text-align: center;
    /*test*/
    z-index: 1;
}
li.navigator:hover,
li.navigator:active {
    color: rgba(250,250,250,1);
    text-shadow: 0px 0px 10px rgba(250,250,250,1);
}
li.active_navigator {
    padding: 10px 0px;
    display: inline-block;
    position: relative;
    right: 2px;
    /*a*/
    border-radius:10px 0px 0px 10px;
    background: rgba(180,190,160,1) ;
    border: 2px rgba(71,71,71,1) solid;
    border-right-color: rgba(180,190,160,1);
    z-index: 2;
    /*b*/
    margin-bottom: 5px;
    color: rgba(72,72,72,1);
    width: 100%;
    text-align: center;
}
li.navigator:before {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    /*a*/
    width: 90%;
    height: 100%;
    top: 0%;
    left: 10%;
    background: rgba(131,131,101,0.5) ;
    /*a*/
    border-radius:10px 0px 0px 10px;
}
li.navigator:hover:before,
li.navigator:active:before {
    width: 95%;
    height: 100%;
    left:5%;
    background: rgba(161,161,131,0.5) ;
    color: red;
}
div.navigator_content {
    width: 84%;
    height: 96%;
    margin: 0px auto;
    background: rgba(180,190,160,1) ;
    position: relative;
    top: 2%;
    left:1%;
    float: left;
    border-radius: 20px;
    border: 2px rgba(71,71,71,1) solid;
}
/* ----  Navigator ( end ) ---- */

/* ----  FuncTab (start) ---- */
div.func_tab {
    width: 96%;
    margin:5px auto 0px auto;
}
h1.func_tab {
    display: inline-block;
    float: left;
    margin: 5px 5px 5px;
    width: 30%;
    text-align: center;
    font-size: 1.5em;
}
ul.func_tab {margin:0; padding:0; font-weight:normal;list-style: none;}
li.func_tab { 
    background: none;
    cursor: pointer;
    padding: 10px 25px;
    display: inline-block;
    position: relative;
    border-radius:20px 20px 0px 0px;
    color: rgba(73,73,73,1);
    font-size: 1em;
}
li.func_tab:hover,
li.func_tab:active {
    color: rgba(250,250,250,1);
    text-shadow: 0px 0px 10px rgba(250,250,250,1);
}
li.func_tab:before {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    /*a*/
    width: 100%;
    height: 80%;
    top: 20%;
    left: 0;
    background: rgba(131,131,101,0.2) ;
    /*a*/
    border-radius:20px 20px 0px 0px;
    z-index: 2;
}
li.func_tab:hover:before,
li.func_tab:active:before {
    width: 100%;
    height: 90%;
    top:10%;
    background: rgba(161,161,131,0.2) ;
}
li.active_func_tab {
    padding: 10px 25px;
    display: inline-block;
    position: relative;
    top:2px; 
    /*a*/
    border-radius:20px 20px 0px 0px;
    background: rgba(181,181,151,1) ;
    border: 2px rgba(51,51,81,1) solid;
    border-bottom-color: rgba(181,181,151,1) ;
    z-index: 2;
    /*b*/
    font-weight: bold;
}
div.func_tab_content {
    width: 98%;
    height: 91%;
    margin: 0px auto;
    background: rgba(181,181,151,1) ;
    border-radius:20px;
    border: 2px rgba(51,51,81,1) solid;
    /*a*/
}
/* ----  FuncTab ( end ) ---- */

#data_content {
    margin: 5px 5px 5px 5px;
}

div.footer {
    margin: 5px auto;
    width: 60%;
    text-align: right;
    color: rgba(250,250,250,1);
    text-shadow: 0px 0px 10px rgba(250,250,250,1);
    /*border: 1px red dashed;*/
}
